Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(fabric.util) add transformPath and joinPath to support text on a path #7300

Merged
merged 8 commits into from
Aug 27, 2021
Merged

feat(fabric.util) add transformPath and joinPath to support text on a path #7300

merged 8 commits into from
Aug 27, 2021

Conversation

asturur
Copy link
Member

@asturur asturur commented Aug 14, 2021

@melchiar this utility function would transform a path to a new path that unscaled/unrotate is equivalent to the one scaled/rotated.

I did not try it yet, i ll try to make a test tomorrow with text on a path or other paths effects.

@github-actions
Copy link
Contributor

github-actions bot commented Aug 14, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.18 |    77.02 |   85.87 |    82.9 |                                               
 fabric.js |   83.18 |    77.02 |   85.87 |    82.9 | ...,29857,29982,30062-30127,30250,30349,30566 
-----------|---------|----------|---------|---------|-----------------------------------------------

@asturur
Copy link
Member Author

asturur commented Aug 14, 2021

The idea is that you do your transform operation as usual ( scale/ rotate / skew ).
instead of applying the transform to the text, you apply it to the path in the text.
Then you use this function to put the trasnformation in the path segments,
you swap the path segments, you calculate the bounding box again.
And you assign the path to the text.
Eventually having a new path is better so that the text understand that a change happened.

For path on canvas, this code is going to change the path properties, but keeping a correct top/left is a different issue entirely.

@melchiar
Copy link
Member

Cool, thanks. I will test this evening. Also, what exactly is the advantage to recalculating the path coordinates rather than simply having text respond to a path's scale values?

@asturur
Copy link
Member Author

asturur commented Aug 14, 2021

The difference is that the only way to do that is with uniform scaling, you can't really do anything else.
So you would scale the path, scale the path length values returned from the calculation, and you would be done.
But if you need to do anything else like:

  • scaling from one side only
  • skewing
  • rotate
    this is the only way to do it.

@asturur
Copy link
Member Author

asturur commented Aug 14, 2021

search-gif

this is what it does, i m sure caching is doing something wrong and that hiccup can be fixed

@asturur
Copy link
Member Author

asturur commented Aug 14, 2021

i did not write the custom controls but you can do this either with custom controls or with events.
The complexity i think is the same.

@melchiar
Copy link
Member

K, I've got the resizing event working although there is the still caching problem to sort out. When all the pieces have come together I'll put together a demo for the website. Are you okay with merging this transformPath function or was this just meant as as an example?

textpath-resizing

@asturur
Copy link
Member Author

asturur commented Aug 23, 2021

Sorry not following back on pulling out my example. The baby is taking all my time.
Yes this function is good. i have to update the changelog and the JSDOC slightly.
Ping me again if i don't do it today

@melchiar
Copy link
Member

Sorry not following back on pulling out my example. The baby is taking all my time.

No worries, babies tend to do that 😂

@melchiar
Copy link
Member

@asturur is this okay to merge?

@asturur
Copy link
Member Author

asturur commented Aug 27, 2021

merging this now and tomorrow releasing 4.6.0

@github-actions
Copy link
Contributor

github-actions bot commented Aug 27, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |    83.2 |    77.04 |   85.91 |   82.93 |                                               
 fabric.js |    83.2 |    77.04 |   85.91 |   82.93 | ...,29918,30043,30123-30188,30311,30410,30627 
-----------|---------|----------|---------|---------|-----------------------------------------------

@github-actions
Copy link
Contributor

github-actions bot commented Aug 27, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.33 |    77.04 |   86.04 |   83.05 |                                               
 fabric.js |   83.33 |    77.04 |   86.04 |   83.05 | ...,29924,30049,30129-30194,30317,30416,30633 
-----------|---------|----------|---------|---------|-----------------------------------------------

@github-actions
Copy link
Contributor

github-actions bot commented Aug 27, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.33 |    77.08 |   86.04 |   83.05 |                                               
 fabric.js |   83.33 |    77.08 |   86.04 |   83.05 | ...,29921,30046,30126-30191,30314,30413,30630 
-----------|---------|----------|---------|---------|-----------------------------------------------

@github-actions
Copy link
Contributor

github-actions bot commented Aug 27, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.33 |    77.06 |   86.04 |   83.05 |                                               
 fabric.js |   83.33 |    77.06 |   86.04 |   83.05 | ...,29921,30046,30126-30191,30314,30413,30630 
-----------|---------|----------|---------|---------|-----------------------------------------------

@github-actions
Copy link
Contributor

github-actions bot commented Aug 27, 2021 •
edited
Loading

Code Coverage Summary

> fabric@4.5.1 coverage:report /home/runner/work/fabric.js/fabric.js
> nyc report --reporter=lcov --reporter=text

-----------|---------|----------|---------|---------|-----------------------------------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-----------|---------|----------|---------|---------|-----------------------------------------------
All files  |   83.33 |    77.06 |   86.04 |   83.05 |                                               
 fabric.js |   83.33 |    77.06 |   86.04 |   83.05 | ...,29921,30046,30126-30191,30314,30413,30630 
-----------|---------|----------|---------|---------|-----------------------------------------------

@asturur asturur changed the title draft of the function feat(fabric.util) add transformPath and joinPath to support text on a path Aug 27, 2021
@asturur asturur merged commit 6790696 into master Aug 27, 2021
@asturur asturur mentioned this pull request Aug 27, 2021
Merged
@ShaMan123 ShaMan123 mentioned this pull request Oct 5, 2021
Closed
@asturur asturur deleted the add-trasnform-path branch February 4, 2022 17:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@asturur @melchiar